<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<script type="text/javascript" src="protovis-d3.2.js"></script>
        <script type="text/javascript" src="northampton item 2007 abbrev.js"></script> 
        <style type="text/css">
            body { color: black; background-color: white }
        </style>
	</head>
    <body>
        <script type="text/javascript">
        var root = pv.dom(itemData)
            .root('itemData');
        var vis = new pv.Panel()
            .width(370)
            .height(function() (root.nodes().length + 1) * 12)
            .margin(5);
        var layout = vis.add(pv.Layout.Indent)
            .nodes(function() root.nodes())
            .depth(12)
            .breadth(12);
        layout.link.add(pv.Line);
        var node = layout.node.add(pv.Panel)
            .top(function(n) n.y - 6)
            .height(12)
            .right(6)
            .strokeStyle(null)
            .events("all")
            .event("mousedown", toggle);
        node.anchor("left").add(pv.Dot)
            .strokeStyle("#1f77b4")
            .fillStyle(function(n) n.toggled ? "#1f77b4" : n.firstChild ? "#aec7e8" : "#ff7f0e")
            .title(function t(d) d.parentNode ? (t(d.parentNode) + "." + d.nodeName) : d.nodeName)
            .anchor("right").add(pv.Label)
            .text(function(n) n.nodeName);
        node.anchor("right").add(pv.Label)
            .textStyle(function(n) n.firstChild || n.toggled ? "#aaa" : "#000")
            .text(function(n) n.nodeValue);
        vis.render();

        function toggle(n) {
            n.toggle(pv.event.altKey);
            return layout.reset().root;
        }
</script>
	</body>
</html>
